<template>
  <div class="todoapp">
    <todo-hearder 
    :getSlect="getSlect" 
    @all="all"
    @addClick="addClick"/>
    <todo-main 
    :list="isList || list" 
    @delClick="delClick" 
    @isSelect="isSelect"/>
    <todo-footer 
    :list="list"
    @isClick="isClick"
    @delComplete="delComplete"/>
  </div>
</template>

<script>
import TodoHearder from "components/TodoHearder";
import TodoMain from "components/TodoMain";
import TodoFooter from "components/TodoFooter";
import {mapState, mapGetters} from 'vuex'

export default {
  data() {
    return {
    };
  },
  components: {
    TodoHearder,
    TodoMain,
    TodoFooter,
  },
  computed: {
     ...mapState(['list']),
    ...mapGetters(['getSlect', 'isList']),
  },
  // 监听list
  watch: {
    list: {
      deep: true,
      handler() {
        localStorage.setItem('list', JSON.stringify(this.list))
      }
    }
  },
  methods: {
    // 是否要全部  选择/不选择
    all(val) {
      this.$store.commit('isAll', val)
    },
    // 删除
    delClick(id) {
      this.$store.commit("del", id);
      this.$prompt.show("删除成功！");
    },
    // 是否选中
    isSelect(id) {
      this.$store.commit('isSelect', id)
    },
    // 添加任务
    addClick(text) {
      this.$store.commit("add", text);
    },
    // 判断底部选中状态
    isClick(index) {
      this.$store.commit("check", index);
    },
    // 删除已选中
    delComplete() {
      this.$store.commit("delAll");
    }
  },
};
</script>

<style lang="scss" scoped>
</style>